<!-- 客户类型，客户细类选择组件 -->
<template>
    <el-cascader
            :options="financeList"
            :props="propsFinance"
            :model="456"
            @active-item-change="FhandleItemChange"
            @change="change"
            :value="initValue"
            :show-all-levels="false"
    ></el-cascader>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    @Component({})
    export default class FinanceType extends Vue {
        financeList = []            // options：可选数据源
        propsFinance = {               // props：是一个对象，相关配置如下
            value: 'financeCode',
            label: 'financeName',
            children: 'financeList'
        }
        initValue = []        // value：选中项绑定值

        // active-item-change：当父级选项发生变化是触发，各父级选项组成的数组（所以在调用的时候，默认参数要传数组）
        async FhandleItemChange (ids) {
            if(ids.length === 0){
                this.financeList = await this.getFinance('', false);
            }else if (ids.length === 1){
                for(let i = 0; i < this.financeList.length; i++){
                    if (this.financeList[i].financeCode == ids[0]){
                        this.financeList[i].financeList = await this.getFinance(ids[0], true);
                    }
                }
            }
        }

        // 获取客户类型
        async getFinance (financeCode: string, isEnd: boolean) {
            let params = {
                financeCode: financeCode
            }
            let response = await this.$http.get('fbank/constants/financeType',{params},{ loading: false })
            if(!isEnd){
                response.data.forEach(v => v.financeList = []);
            }
            return response.data;
        }
        mounted () {
            this.FhandleItemChange([]);
        }
        // change：当绑定事件触发时，回调是当前值
        change (areas) {
            this.$emit('input', areas);
        }
        async init (initValue) {
            this.initValue = initValue
            // console.log(initValue)
            setTimeout(async () => {
                for (let i = 0; i < this.financeList.length; i++) {
                    if (this.financeList[i].financeCode === initValue[0]) {
                        this.financeList[i].financeList = await this.getFinance(initValue[0], true);
                        // for (let j = 0; j < this.financeList[i].financeList.length; j ++){
                        //     this.financeList[i].financeList[j].financeList = await this.getFinance(initValue[1], true)
                        // }
                    }
                }
            }, 400)
            this.$emit('input', initValue);
        }
    }
</script>

<style lang="scss" scoped>

</style>